import React, {Component} from 'react';
import {withRouter, Link, Switch, Route} from 'react-router-dom'
import { Input, Steps } from 'antd';
import Loading from "./../loading"

import "../../static/personal/step.styl"
import $ from "jquery"
const Step = Steps.Step;

export default class Step1 extends React.Component{
  timing(){
    $(".s-code").css("display","none");
    $(".sc-time").css("display","block");
    var clock=60;
    setTimeout(function timee() {
      if(clock>0){
        clock-=1;
        $(".sc-time").html(clock+"秒后获取新验证码");
        setTimeout(function () {
          timee()
        },1000)
      }else if(clock===0){
        $(".s-code").css("display","block");
        $(".sc-time").css("display","none");
        clock=60;
      }
    })

  }
  render(){
    return(
      <div>
        <Loading />
        <div className="stepBar">
          <Steps current={0}>
            <Step description="步骤1-填写用户信息"/>
            <Step description="步骤2-修改密码" />
            <Step description="步骤3-完成" />
          </Steps>
        </div>
        <div className="s1Content">
          <div className="a-line codeSite">
            <span>用户账户：</span>
            <Input />
            <div className="s-code" onClick={this.timing}>获取验证码</div>
            <div className="sc-time">60秒后获取新验证码</div>
          </div>
          <div className="a-line">
            <span>验证码：</span>
            <Input />
          </div>
          <div className="s-btn"><Link to="step2" style={{color:"white"}}>下一步</Link></div>
        </div>
      </div>
    );
  }
}